// 布局尺寸
$header-height: 3.75rem; // 60px
$admin-header-height: 3.75rem; // 60px
$sidebar-width: 15rem; // 240px
$footer-height: 3.125rem; // 50px

// 基础单位
$base-size: 1rem; // 16px

// 间距
$spacing-base: 0.25rem; // 4px
$spacing-xs: $spacing-base * 2; // 0.5rem - 8px
$spacing-sm: $spacing-base * 3; // 0.75rem - 12px
$spacing-md: $spacing-base * 4; // 1rem - 16px
$spacing-lg: $spacing-base * 6; // 1.5rem - 24px
$spacing-xl: $spacing-base * 8; // 2rem - 32px

// 字体大小
$font-size-xs: 0.75rem; // 12px
$font-size-sm: 0.875rem; // 14px
$font-size-base: 1rem; // 16px
$font-size-lg: 1.125rem; // 18px
$font-size-xl: 1.25rem; // 20px

// 圆角
$radius-base: 0.25rem; // 4px
$radius-lg: 0.5rem; // 8px
$radius-xl: 1rem; // 16px
$radius-full: 9999px;

// 阴影
$shadow-sm: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);
$shadow-md: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1);
$shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1);

// 过渡
$transition-base: all 0.3s ease;
$transition-slow: all 0.5s ease;
$transition-fast: all 0.15s ease;

// 断点
$breakpoints: (
  'sm': 40rem,
  // 640px
  'md': 48rem,
  // 768px
  'lg': 64rem,
  // 1024px
  'xl': 80rem,
  // 1280px
  '2xl': 96rem // 1536px
);

// z-index层级
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;

:root{
   // 布局尺寸
   --admin-header-height: 60px;
   --admin-sidebar-width: 240px;
   // 布局尺寸
  --front-header-height: 60px;
  --front-transition: all 0.3s ease;
  --front-radius: 4px;

  // 前端主题变量
  --front-bg: #ffffff;
  --front-bg-secondary: #f8f9fa;
  --front-bg-light: #f0f2f5;
  --front-text: #333333;
  --front-text-secondary: #666666;
  --front-border: #e4e7ed;
  --front-border-light: #ebeef5;
  --front-primary: #409eff;
  --front-primary-light: #a0cfff;
  --front-primary-rgb: 64, 158, 255;
  --front-success: #67c23a;
  --front-warning: #e6a23c;
  --front-danger: #f56c6c;
  --front-info: #909399;
  --front-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  --front-glass-blur: 10px;
  --front-glass-bg: rgba(255, 255, 255, 0.6);
  --front-glass-dark-bg: rgba(0, 0, 0, 0.6);

  // 后台管理系统变量
  --admin-bg: #f5f7fa;
  --admin-text: #303133;
  --admin-text-secondary: #606266;
  --admin-border: #dcdfe6;
  --admin-menu-bg: #ffffff;
  --admin-menu-text: #303133;
  --admin-primary: #409eff;
  --admin-primary-light: #ecf5ff;
  
  // tooltip相关变量
  --admin-tooltip-bg: #ffffff;
  --admin-tooltip-border: #e4e7ed;
  --admin-tooltip-text: #303133;
}

// 暗色主题变量
[data-theme="dark"] {
  // 前端主题变量 - 暗色模式
  --front-bg: #1a1a1a;
  --front-bg-secondary: #232323;
  --front-bg-light: #2c2c2c;
  --front-text: #e5eaf3;
  --front-text-secondary: #a3a6ad;
  --front-border: #4c4d4f;
  --front-border-light: #3b3c3f;
  --front-primary: #409eff;
  --front-primary-light: #18222c;
  --front-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  --front-glass-bg: rgba(30, 30, 30, 0.7);
  --front-glass-dark-bg: rgba(0, 0, 0, 0.7);

  // 后台管理系统变量 - 暗色主题
  --admin-bg: #1a1a1a;
  --admin-text: #e5eaf3;
  --admin-text-secondary: #a3a6ad;
  --admin-border: #4c4d4f;
  --admin-menu-bg: #1f1f1f;
  --admin-menu-text: #e5eaf3;
  --admin-primary: #409eff;
  --admin-primary-light: #18222c;
  
  // tooltip相关变量 - 暗色主题
  --admin-tooltip-bg: #2c2c2c;
  --admin-tooltip-border: #4c4d4f;
  --admin-tooltip-text: #e5eaf3;
}